<template>
    <div>
        <footer>
            <div class="mdui-container">
                <div class="mdui-row serve">
                    <div class="mdui-col-lg-4 mdui-text-center">
                        <i class="mdui-icon material-icons">insert_emoticon</i>
                        <span class="text">30天无忧退换货</span>
                    </div>
                    <div class="mdui-col-lg-4 mdui-text-center">
                        <i class="mdui-icon material-icons">local_shipping</i>
                        <span class="text">满88元免邮费</span>
                    </div>
                    <div class="mdui-col-lg-4 mdui-text-center">
                        <i class="mdui-icon material-icons">account_balance</i>
                        <span class="text">风风品质保证</span>
                    </div>
                </div>
                <div class="siteinfo">
                    <div class="mdui-row">
                        <div class="mdui-col-lg-10 mdui-text-center">
                            <div class="mdui-row">
                                <div class="links">
                                    <a href="">关于我们</a><span>|</span>
                                    <a href="">帮助中心</a><span>|</span>
                                    <a href="">售后服务</a><span>|</span>
                                    <a href="">配送与验收</a><span>|</span>
                                    <a href="">商务合作</a><span>|</span>
                                    <a href="">企业采购</a><span>|</span>
                                    <a href="">开放平台</a><span>|</span>
                                    <a href="">搜索推荐</a>
                                </div>
                            </div>
                            <div class="mdui-row">
                                <div class="copyright">网易公司版权所有 © 1997-2018 食品经营许可证：JY13301080111719
                                    出版物经营许可证：新出发滨字第0132号
                                </div>
                            </div>
                        </div>
                        <div class="mdui-col-lg-2">
                            <div class="cp-img">
                                <img src="http://yanxuan.nosdn.127.net/86f32b668af6e537389a77480fb5c74d.gif">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</template>

<script>
    export default {
        name: "Footer"
    }
</script>

<style scoped>
    footer {
        margin-top: 20px;
        height: 200px;
        background-color: #414141;
    }

    footer .serve {
        height: 100px;
        color: white;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #4f4f4f;
    }

    footer .serve i {
        font-size: 60px;
    }

    footer .siteinfo {
        margin-top: 30px;
        color: #999;
        font-size: 13px;
    }

    footer .cp-img img {
        height: 39px;
        width: 36px;
    }

    footer .siteinfo .links {
        margin-bottom: 10px;
        display: inline-flex;
        width: 600px;
        justify-content: space-around;
    }

    footer .siteinfo .links a {
        text-decoration: none;
        color: #999;

    }
</style>